<!doctype html>
<html>
	<!--  head由浏览器内核解析.制定的一些与显示无关的标准.  -->
	<head>
		<!-- 让浏览器内核以UTF-8的编码格式解析当前HTML文档 -->
		<meta charset="utf-8" />
		<!-- 浏览器标签栏显示的内容 -->
		<title>主页</title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a><br>
		<!-- 相对于当前文件可以看到文件或文件夹.
			../ 向上一级
			/ 向下一级
		  -->
		<img src="image/logo.png" width="50"  />
		<h3>标题--块级元素</h3>
		<!-- 级联标签 -->
		<ul style="list-style-type:none;" >
			<li >li1</li>
			<li >li2</li>
		</ul>
		<hr>
		<!-- form表单的包含的内容提交到后台.  是由type="submit"的input标签来激活 form.submit 事件.
			action是提交地址	name区分多个form表单	method定义提交的方式(GET/POST)
		        form表单中,都是由input标签来实现的,只是属性不同 
		-->
		<form action="#" name="form1" method="get" >
				
			<input type = "text"  placeholder = "请输入您的用户名" />	<br><!--- 文本框 name属性是后台接收数据请求的属性. -->
			<input type = "password" placeholder="请输入您的密码" /> <br> <!-- 密码框 -->
			<span>请选择您的性别</span><br><!-- 文字的容器 -->
			<label for="man">男</label>
			<input type = "radio" name="sex" id="man" checked />	<!-- 单选框 ,没有name属性的情况下,多个单选框是没有关联的. -->
			<label>女<input type = "radio" name="sex" ></label>
			<label>人妖<input type = "radio" name="sex" ></label><br>
			<span>请选择您的爱好</span><br>
			<label>book<input type = "checkbox" name="hobby" checked="checked" ></label> <!-- name属性的作用是将多选的内容整合成一个数组(集合) -->
			<label>game<input type = "checkbox" name="hobby" ></label>
			<label>basketball<input type = "checkbox" name="hobby" ></label>
			<label>football<input type = "checkbox" name="hobby" ></label>
			<label>swimming<input type = "checkbox" name="hobby" ></label><br>
			<!-- select下拉框 -->
			<span>请选择您的生日<span><br>
			<select>
				<option>1997</option>
				<option >1998</option>
				<option selected >1999</option>
				<option>2000</option>
				<option>2001</option>
			</select>	
			<textarea ></textarea>
			<br><input type = "submit" />
		</form>
	</body>
</html>